<template>
     <div class="header">  
            <div class="logo">云音乐</div>
            <input class="serch"
                   v-model="query"
                   @keyup.enter="searchMusic">
            <!-- 搜索按钮 -->
            <span class="button"
                  @click="searchMusic">search</span>
        </div>
</template>
<script>
export default {
    name:'Header',
    data(){
        return{
            //查询关键字
            query: "银临",
        }
    },
    created() {
        //预搜索
        this.searchMusic()
    },
    methods:{
        // 根据关键字搜索歌曲
        searchMusic() {
        let p = {
            keywords: this.query
        }
        this.$api.Search(p).then(res => {
            this.$emit('GetMusicList', res.result.songs)
        }).catch(() => {})
        },
    }
}
</script>
<style scoped>

/* 头部 */
.header {
    height: 50px;
    background-color: #f00;
    padding: 0 30px;
    position: relative;
}

/* logo */
.header .logo {
    color: #fff;
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    width: 100px;
}

/* 搜索框 */
.header .serch {
    width: 300px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #fff;
    padding-left: 20px;
    outline: none;
    position: absolute;
    right: 20px;
    top: 8px;
}

/* 搜索按钮 */
.header .button {
    font-size: 20px;
    color: #ccc;
    position: absolute;
    right: 35px;
    top: 10px;
    display: inline-block;
    border-left: 1px solid #ccc;
    padding-left: 10px;
    height: 28px;
}

</style>